{% load static %}

<div class="container">
    <div class="select">
        <div class="sort4">
            {% for i in classes %}
                <a href="#" data-value="{{ i }}"><span class="class-list">{{ i }}</span></a>
            {% endfor %}
        </div>
        <div class="sort3">
            {% for j in subjects %}
                <a href="#" data-value="{{ j }}"><span class="subjects-list">{{ j.name }}</span></a>
            {% endfor %}
        </div>
        <div class="sort2">
            {% for k in teachers %}
                <a href="#" data-value="{{ k }}"><span class="teachers-list">{{ k }}</span></a>
            {% endfor %}
        </div>
        <div class="sort1">
            {% for s in BorC %}
                <a href="#" data-value="{{ s }}"><span class="BorC">{{ s }}</span></a>
            {% endfor %}
        </div>
    </div>

    <div class="show">
        {% if resources %}
            {% for resource in resources %}
                <li>
                    <a href="/resources/resource_detail/books/{{ resource.id }}">
                        <div class="left">
                            <img src="/static/media/img/{{ resource.cover }}" alt="图片跑了">
                        </div>
                        <div class="right">
                            <h2>{{ forloop.counter }}、{{ resource.title }}</h2>
                            <p class="desc">{{ resource.desc }}</p>
                            <p class="info">发布时间:{{ resource.create_time }}</p>
                        </div>

                    </a>
                </li>
                {% if forloop.last %}
                    <div class="bottom_info">
                        到底啦~~~
                    </div>
                {% endif %}

            {% endfor %}
        {% else %}
            <div class="bottom_info">暂无内容</div>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const sortGroups = document.querySelectorAll(".select div"); // 获取所有筛选组

    sortGroups.forEach(group => {
        const links = group.querySelectorAll("a");

        if (links.length > 0) {
            links[0].classList.add("selected"); // 默认选中第一项
        }

        links.forEach(link => {
            link.addEventListener("click", function (event) {
                event.preventDefault(); // 阻止默认跳转

                // 先清除该组内所有 a 的选中状态
                links.forEach(l => l.classList.remove("selected"));

                // 再给当前点击的 a 添加选中状态
                this.classList.add("selected");

                // 获取筛选项
                updateResourceList();
            });
        });
    });

    function updateResourceList() {
        const selectedClass = document.querySelector(".sort4 a.selected")?.getAttribute("data-value") || "";
        const selectedSub = document.querySelector(".sort3 a.selected")?.getAttribute("data-value") || "";
        const selectedTea = document.querySelector(".sort2 a.selected")?.getAttribute("data-value") || "";
        const selectedType = document.querySelector(".sort1 a.selected")?.getAttribute("data-value") || "";

        // 发送 AJAX 请求
        fetch(`/resources/filter_resources/?class=${selectedClass}&sub=${selectedSub}&tea=${selectedTea}&type=${selectedType}`)
            .then(response => response.json())
            .then(data => {
                const resourceContainer = document.querySelector(".show");
                resourceContainer.innerHTML = "";  // 清空现有内容

                if (data.resources.length > 0) {
                    data.resources.forEach((resource, index) => {
                        resourceContainer.innerHTML += `
                            <li>
                                <a href="/resources/resource_detail/${resource.type}/${resource.id}">
                                    <div class="left">
                                        <img src="/static/media/${resource.cover}" alt="图片跑了">
                                    </div>
                                    <div class="right">
                                        <h2>${index + 1}、${resource.title}</h2>
                                        <p class="desc">${resource.desc}</p>
                                        <p class="info">发布时间: ${resource.create_time}</p>
                                    </div>
                                </a>
                            </li>`;
                    });

                    resourceContainer.innerHTML += `<div class="bottom_info">到底啦~~~</div>`;
                } else {
                    resourceContainer.innerHTML = `<div class="bottom_info">暂无内容</div>`;
                }
            })
            .catch(error => console.error("获取资源失败:", error));
    }
});
</script>
